iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 7
0

同步發表到驢形筆記

各種參數與接收

在上一篇已經實做過兩種協定類型的API了,常用的協定有get、post、put、patch和delete五種。在這邊我們用get和post兩種作示範,在下一篇再繼續測試另外三種和如何進行選擇。

好的,API在呼叫的時候有兩種方法可以帶參數到後端過去。第一種是用網址帶參數,第二種是帶到body裡面傳到後端去。這邊我們先實作get,前往"views/test.ejs"

views/test.ejs

<!DOCTYPE html>
<html>
  <head>
    <title>測試頁面</title>
    <link rel='stylesheet' href='/stylesheets/style.css' />
  </head>
  <body>
    <h1>這是測試頁面</h1>
    <p>Welcome to 這是測試頁面</p>
    <button id="callGetApi">GET API</button>
    <br>
    <button id="callPostApi">POST API</button>
    <br>
    <a href="./">前往首頁</a>
    <script>
        let callGetApiButton = document.getElementById('callGetApi');
        callGetApiButton.addEventListener('click',async function(){
          let result = await fetch('/test/get?id=helloworld').then(res=>{
            return res.text();
          })
          alert(result);
        })
  </script>
  </body>
</html>

接著前往"routes\test.js"增加路線

routes\test.js

略
router.get('/get', function(req, res, next) {
  res.json({
    status: 'OK',
    value: 'hello get!建立好囉!'
  });
});
module.exports = router;

打開伺服器用遊覽器前往test頁面(http://localhost:3000/test ),應該會看到兩個按鈕。按下GET API這個按鈕就能看到目前的成果
https://ithelp.ithome.com.tw/upload/images/20200921/20130673G2thrgYgYY.jpg
接著實作參數,讓我們在發出請求的時候多一段"?id=hellword"

views\test.ejs

略
        let callGetApiButton = document.getElementById('callGetApi');
        callGetApiButton.addEventListener('click',async function(){
          let result = await fetch('/test/get?id=helloworld').then(res=>{
            return res.text();
          })
          alert(result);
        })
略

回到伺服器取得該參數

routes\test.js

略
router.get('/get', function(req, res, next) {
  res.json({
    status: 'OK',
    value: 'hello get!建立好囉!',
    query: req.query
  });
});
module.exports = router;

重新開啟伺服器後回到頁面(http://localhost:3000/test ),參數就會被帶回網頁
https://ithelp.ithome.com.tw/upload/images/20200921/201306733CLe1KVYcJ.jpg
好的,接著實作另一種網址參數帶法!更改"views\test.ejs"

views\test.ejs

略
    <button id="callGetApi">GET API</button>
    <button id="callGetApi2">GET API2</button>
略
        <script>
略
        let callGetApi2Button = document.getElementById('callGetApi2');
        callGetApi2Button.addEventListener('click',async function(){
          let result = await fetch('/test/get/12345678?id=helloworld').then(res=>{
            return res.text();
          })
          alert(result);
        })
        </script>
  </body>
</html>

接著前往建立路線

routes\test.js

略
router.get('/get/:id', function(req, res, next) {
  res.json({
    status: 'OK',
    value: 'hello get2!建立好囉!',
    query: req.query,
    params: req.params
  });
});
module.exports = router;

重開伺服器後到網頁點擊GET API2就能到結果
https://ithelp.ithome.com.tw/upload/images/20200921/20130673wMytjSDJKs.jpg
有看出區別了嗎?在第二個範例中我們將路由設定成了動態路由"/get/:id'"也就是說這個路線後面會被認為是參數並可以在伺服器使用"req.params"進行撈取,跟利用"?"後帶參數不同且不會互相影響。這樣兩種網址帶參數的方式就實現了,這邊有點複雜建議多看幾次反覆推測之後再繼續看如何帶資料。(這邊能推測出來並會用很重要,因為下一篇會繼續實作並運用這部分的用法。)

如果上面你已經可以推測出大概了,那就開始帶資料吧。前往"views\test.ejs"

views\test.ejs

略
<script>
略
        let callPostApiButton = document.getElementById('callPostApi');
        callPostApiButton.addEventListener('click',async function(){
          let result = await fetch('/test/post/12345678?id=helloworld',{
            method: 'post',
            body: JSON.stringify({
              id: 987654321
            }),
            headers: {
              'content-type': 'application/json'
            },
          }).then(res=>{
            return res.text();
          })
          alert(result);
        })
  </script>
  </body>
</html>

為什麼不用get??因為get沒有body這個東西,所以沒辦法把資料藏起來。接著建立路線

routes\test.js

略
router.post('/post/:id', function(req, res, next) {
  res.json({
    status: 'OK',
    value: 'hello post!建立好囉!',
    query: req.query,
    params: req.params,
    body: req.body
  });
});
module.exports = router;

重新開啟伺服器後,回到網頁按下post api吧
https://ithelp.ithome.com.tw/upload/images/20200921/201306733gbjjPJRHV.jpg
這樣各種帶資料的方式就算是學習完成,且"動態路由"的概念在框架使用也會用到,明天會進行其他協定的製作並說明如何選擇。基本上程式碼幾乎都一樣,就是協定上的不同而已。可以自己先試試看,利用今天的內容去推測其他協定如put、patch和delete並不會太困難,請務必反覆推敲並試試看。

githubday07


上一篇
[day06][後端][學習] 現在,用express工具建立模版伺服器!(下)
下一篇
[day08][後端][學習] RESTful API?用五個常用API協定構成五芒星
系列文
什麼都略懂一點,生活更多彩一些。從web跑js出發到部屬heroku伺服器撈取API建構線上網站與LineBot30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言